<template>
    <div>
        <div>
            <!-- <el-button type="primary" to="/jtdemo" round>创建</el-button> -->
            <el-button type="primary" @click="detailClick" round>审批</el-button>
            <el-button type="primary" @click="workClick" round>查看工作流</el-button>
        </div>
        <standardTableComponent ref="table" v-bind="tableHeader" @selectionChange="selectionChange"></standardTableComponent>
         <el-dialog
            title=" "
            :visible.sync="centerDialogVisible"
            width="70%"
            center>
            <iframe style="width:100%;height:500px;" :src="iframeStr"></iframe>
        </el-dialog>
    </div>
</template>
<script>
    import standardTableComponent from "@/components/baseComponents/StandardTable";
    import { taskTodoList} from '@/api/api'
    export default {
        "name":"taskTodo",
        components:{
            standardTableComponent
        },
        data(){
            return {
                iframeStr:"http://10.68.24.31:8083/pox/flowImage.html?processInstanceId=",
                centerDialogVisible:false,
                tableHeader:{
                tableRowClassName:this.tableRowClassNameColor,
                // showHeader:false,
                // 表格接口地址  详细地址在api配置
                url:"/flow/listByPage",
                // height:''
                apiName: taskTodoList,//"queryApi"
                tableStyle: 1, //1--主子表格上下布局  2---主子表格左右布局
                // 风格主题
                // tooltip:"dark",
                // 表头数据
                columns:[
                    {prop: '',label: '',  width: '60',align: 'center',type:"selection",fixed:'',isShow:true},
                    {prop: 'processInstanceName', label: '流程实例名称', align: 'center',type:"dictionary",fixed:'',isShow:true},
                    {prop: 'name',label: '任务名称', align: 'center',type:"dictionary",fixed:'',isShow:true},
                    {prop: 'createTime',label: '开始时间', align: 'center',type:"dictionary",fixed:'',isShow:true},
                    {prop: 'endTime',label: '到期日期', align: 'center',type:"dictionary",fixed:'',isShow:true},
                    {prop: 'owner',label: '所有人', align: 'center',type:"dictionary",fixed:'',isShow:true},
                     {prop: 'assignee',label: '执行人', align: 'center',type:"dictionary",fixed:'',isShow:true},
                    
                     
                     
                ],
                 //新增行数据初始化
                // rowDataJson: {
                //     "classificationStr":"","commodityTypeId":"","level":'',"levelDesc":""
                // },
                // 表格数据
                tableData: [
                //     // {id:1,"classificationStr":"12月1日12时12分","checkTime":"月   日   时    分"},
                //     // {id:7,"classificationStr":"12月1日12时12分","checkTime":"可以上"},
                //     // {id:2,"classificationStr":"12月1日12时12分","checkTime":"可以上"},
                //     // {id:3,"classificationStr":"12月1日12时12分","checkTime":"可以上"},
                //     // {id:4,"classificationStr":"12月1日12时12分","checkTime":"可以上"},
                //     // {id:5,"classificationStr":"12月1日12时12分","checkTime":"可以上"},
                //     // {id:6,"classificationStr":"12月1日12时12分","checkTime":"可以上"},
                ],
                //主表主键  主子表的时候必填
                id: "id",
                // 分页
                pageSizeOpt: ['10','20','50','100','200'],
                pageNum:1,
                pageSize:10,
                // 表格高度最大值
                // maxHeight:300, //上下布局主子表250 单表450
                width:100,
            },
            selectedData:""
            }
        },
        mounted(){
            this.initTable();
        },
        methods: {
            initTable() {
                this.$refs['table'].query({});
                // axios.post("/flow/listByPage",{}).then(res=>{

                // })
                // let that=this;
                // queryApi("/flow/listByPage",{}).then(res=>{
                //     debugger;
                //     // console.log(res);
                //     if(res.retCode == "0000000"){
                //        that.tableHeader.tableData=res.rspBody.resultData;
                //     }
                // })
            },
            selectionChange(selection){
                // 表格选中的数据
                this.selectedData = selection;
                console.log(selection);
            },
            detailClick(){
                if(this.selectedData.length>1&&this.selectedData<=0){

                }else{
                    this.$router.push({path:'/jtdemo',query:{sid:this.selectedData[0].serviceId,taskDefinitionKey:this.selectedData[0].taskDefinitionKey,id:this.selectedData[0].id}});
                }
            },
             workClick(){
                // 2a572458-3c65-11ec-852a-144f8aa3e4f4
                this.centerDialogVisible=true;
                this.iframeStr=this.iframeStr+this.selectedData[0].processInstanceId+"&userId=admin";
            }
        }
    }
</script>